<template>
  <div class="password">
    <div class="mima">
      <back></back>
      <span>修改密码</span>
    </div>
    <!-- <van-field
      class="phone"
      v-model="phone"
      type="tel"
      label="手机号"
      placeholder="请输入手机号"
      v-on:blur="chphone"
    /> -->
    <div class="tip">
      请设置自游密码。你可以用注册时使用的手机号+密码登录自游，更便捷。
    </div>
    <van-field
      class="sms"
      v-model="code"
      center
      clearable
      label="验证码"
      v-on:blur="chcode"
      placeholder="输入4位短信验证码"
    >
      <template #button>
        <van-button
          size="small"
          type="info"
          :disabled="disabled"
          @click="sendcode"
          >{{ btntxt }}</van-button
        >
      </template>
    </van-field>
    <!-- 输入密码 -->
    <van-field
      class="pwd"
      v-model="password"
      type="password"
      label="新密码"
      placeholder="请输入新密码"
      v-on:blur="chupwd"
    />
    <!-- 确认密码 -->
    <van-field
      class="put"
      v-model="pwd"
      type="password"
      label="确认密码"
      placeholder="请再次确认密码"
      v-on:blur="rchupwd"
    />
    <van-button class="button" type="info" block @click="determine"
      >确定</van-button
    >
  </div>
</template>
<script>
import back from "../components/back.vue";
import { Notify } from "vant";
import { Toast } from "vant";
export default {
  components: { back },
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      phone: "",
      show: false,
      value: "",
      code: "",
      password: "",
      pwd: "",
      disabled: false,
      time: 5,
      btntxt: "发送验证码",
    };
  },
  methods: {
    // 验证手机号格式
    // chphone() {
    //   let regphone = /^1[3-9]\d{9}$/;
    //   if (regphone.test(this.phone)) {
    //     return true;
    //   } else {
    //     Notify({
    //       type: "primary",
    //       duration: 2000,
    //       message: "手机号格式不正确",
    //     });
    //     return false;
    //   }
    // },
    // 验证密码格式
    chupwd() {
      let regupwd = /^[a-zA-Z0-9]{6,18}$/;
      if (!regupwd.test(this.password)) {
        Notify({
          type: "primary",
          duration: 2000,
          message: "密码请输入6位数以上",
        });
        return false;
      } else {
        return true;
      }
    },
    rchupwd() {
      if (this.pwd != this.password) {
        Notify({
          type: "primary",
          duration: 2000,
          message: "两次密码输入不一致",
        });
        return false;
      } else {
        return true;
      }
    },
    // 验证验证码
    chcode() {
      if (this.code.length == 4) {
        return true;
      } else {
        Notify({
          type: "primary",
          duration: 2000,
          message: "请输入4位验证码",
        });
      }
    },
    // 获取验证码
    // 倒计时
    sendcode() {
      this.axios.post("/api/get_sms", `phone=${this.phone}`).then((result) => {
        Notify({
          type: "primary",
          duration: 2000,
          message: `验证码已发送到${this.phone}`,
        });
      });
      this.time = 60;
      this.timer();
    },
    //发送手机验证码倒计时
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btntxt = this.time + "秒";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "发送验证码";
        this.disabled = false;
      }
    },
    // 确定修改
    determine() {
      if (this.chupwd() && this.rchupwd() && this.chcode()) {
        this.axios
          .put(
            "/api/alter",
            `uid=${this.uid}&upwd=${this.password}&code=${this.code}`
          )
          .then((result) => {
            if (result.data.msg == "ok") {
              Toast.success("密码修改成功");
              this.$router.push(`/homepage`);
            } else {
              Notify({
                type: "primary",
                duration: 2000,
                message: "验证码输入错误",
              });
            }
          });
      }
    },
  },
  mounted() {
    this.axios.get("/user/checkuid/" + this.uid).then((result) => {
      this.phone = result.data.data.phone;
    });
  },
};
</script>
 
<style>
.password .mima {
  margin-bottom: 10px;
  width: 100%;
  height: 60px;
  overflow: hidden;
}
.password .mima span {
  font-size: 16px;
  line-height: 60px;
  color: #333;
}
.password .tip {
  font-size: 16px;
  margin: 30px;
  color: #999;
  text-align: left;
  line-height: 24px;
}
.password .put {
  border: 0;
  font-size: 16px;
  width: 93%;
  padding-left: 0px;
  margin-left: 15px;
}
.password .phone {
  height: 50px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}
.password .sms {
  height: 50px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}
.password .pwd {
  height: 50px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}
.password .button {
  margin-top: 20px;
  font-size: 16px;
}
</style>
